<template>
    <div class="map-template-main">
          <div id="left-panel" class="" style="max-height: 720px;display: flex;">
              <!-- :style="getcardslevel2style()" -->
            <ul id="cards-level2" class="cardlist"  style="min-height: 670px;padding: 1px;;display:none"> 
                <transition name="el-zoom-in-center">
                    <li id="card-12" class="card animated-card cards-level2-left-panel" data-fold="展开" style="padding: 0px; overflow: hidden; z-index: 99; max-height: 670px;width: 368px" >
                        <poidetail class="poidetailxzqh" style="overflow: scroll;"></poidetail>
                    </li> 
                </transition>
            </ul>
            <div class="m-s-sideber__button_left" @click="shwodetails" style="margin-top: 360px;"></div>
        </div>
        
        <div class="container standard-map" >
            <div class="container" id="mapDiv"></div>
            <ul  class="map-tools standard-map__map-tool">
                <a-tooltip placement="bottom" v-if="WFS_loading">
                    <template slot="title">
                    <span>正在加载要素地图...</span>
                    </template>
                    <i aria-label="图标: loading" class="anticon wfs-loading map-tools__item">
                        <svg viewBox="0 0 1024 1024" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="anticon-spin">
                            <path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 0 0-94.3-139.9 437.71 437.71 0 0 0-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path>
                        </svg>
                    </i>
                </a-tooltip>
                <a-tooltip placement="bottom" v-show="region_level>=2" >
                    <template slot="title">
                        <span>返回上级</span>
                    </template>
                    <span  class="map-tools__item" @click="prelevel">
                        <a-icon type="arrow-left" style="color:#5575a6" />
                    </span>
                </a-tooltip>
                <a-tooltip placement="bottom">
                    <template slot="title">
                        <span>复位</span>
                    </template>
                    <span class="map-tools__item" @click="reset">
                        <svg  aria-hidden="true" class="svg-icon">
                            <use xlink:href="#icon-map-tool-home"></use>
                        </svg>
                    </span>
                </a-tooltip>
            </ul>
        </div>
        <div id="mapType-wrapper">
            <div id="mapType">
            <div class="mapTypeCard normal" data-name="sl"><span>地图</span></div>
            <div class="mapTypeCard earth" data-name="yx"><span>影像</span></div>
            <!-- <div class="mapTypeCard panorama choosedType" data-name="panorama"> <span>全景</span></div> -->
            </div>
        </div>
    </div>
</template>
<script>
    let this_P;
    export default {
        data() {
            return {
                olMap: {}, //地图对象ol
                olView:{},
                restExtent:[],
                // regionid:150000000,
                // regionname:'内蒙古自治区',

                regionid:0,
                regionname:'',

                orginViewPoint:[114.35666406249996, 44.70117811999853],
                region_level:1,
                region_precode:150000000,
                Layer_wms:null,//WMS图层
                Layer_wfs:null,//WFS图层
                vector_WFS_Source:null,
                WFS_loading:false,//WFS图层加载状态
                Layer_wfs_Neighbor:null,//WFS图层的相邻图层
                Layer_station: null, //行政区划的驻地maker图层的要素集 ol.source.Vector
                station_maker_source: null, //行政区划的驻地maker图层的要素集 ol.source.Vector
                Layer_station_charts: null, //行政区划的驻地charts图层的要素集 ol.source.Vector

                
                Filterlayer:null,
                OverFeature:null,



                propName:'persons',
                active_result_details:{},

                checkbox_checked:false,
                ColorRGB:[
                    [255,  255,  196,  1],
                    [217,  255,  179,  1],
                    [224,  232,  255,  1],
                    [255,  235,  189,  1],
                    [255,  240,  245,  1],
                    [255,  204,  191,  1],
                    [219,  255,  196,  1],
                    [251,  230,  255,  1],
                    [200,  238,  255,  1],
                    [252,  222,  211,  1],
                    [202,  252,  241,  1],
                    [213,  204,  251,  1],
                    [187,  252,  222,  1],
                    [255,  255,  196,  1],
                    [217,  255,  179,  1],
                    [224,  232,  255,  1],
                    [255,  235,  189,  1],
                    [255,  240,  245,  1],
                    [255,  204,  191,  1],
                    [219,  255,  196,  1],
                    [251,  230,  255,  1],
                    [200,  238,  255,  1],
                    [252,  183,  211,  1],
                    [202,  252,  241,  1],
                    [193,  184,  251,  1],
                    [187,  252,  222,  1],
                    [255,  240,  245,  1],
                ],
                station_maker_charts:'https://nmgwxyy.cn/alatan/static/image_source/xzqh/zxcOther.png',
                station_maker:`${window.Glod.baseUrl}pics/xzc.png`//"https://nmgwxyy.cn/alatan/static/image_source/xzqh/xzc.png",
                
                // 
            }
        },
        components: {
            poidetail: () => import("@/components/map/poidetail.vue"),
        },
        watch: {
            '$store.state.MengWen':(_old,_new)=>{
                this_P.regionidChange();
            }
        },
        computed: {},
        mounted() {
            this_P=this;
            console.log("map_xzqh mounted")
            this.initmap();//初始化地图
            this.init_wrapper();
            this.container_size_change();
            this.$Bus.$on('container_size_change', (code) => {
                this.container_size_change();
            })
            this.$Bus.$on('update_lang', () => {
                this.MengWen=this.$store.state.MengWen;
                this.regionidChange();
            })
            this.$Bus.$on('fly_to', (x,y,Zoom=11) => {
                let point=new ol.geom.Point(ol.proj.transform([x, y],'EPSG:4326', 'EPSG:3857' ))
                this.ViewFlyTo(point,{
                    maxZoom:Zoom
                });
            })
            //.$off('regionid_change')
            this.$Bus.$on('regionid_change', (regionid,level,regionname,precode) => {
                console.log("map_xzqh regionid_change recvied",regionid,level,regionname,precode)
                this.regionid=regionid;
                this.region_level=level
                this.regionname=regionname
                this.region_precode=precode;
                this.regionidChange();
            })  
            this.$Bus.$on('add_station_marker', (x,y) => {
                this.add_station_Marker(x,y)
            })
            this.$Bus.$on('clear_station_marker', () => {
                this.clear_station_Marker()
            })
            this.$Bus.$on('get_station_codes', (year) => {
                this.get_station_codes()
            })
            this.$Bus.$on('add_station_chart', (all_station_Persons) => {
                this.all_station_Persons=all_station_Persons;
                this.add_station_chart()
            })
            this.$Bus.$on('clear_station_chart', () => {
                this.clear_station_chart()
            })
            this.$Bus.$on('featrue_over', (status) => {
                this.clear_station_Marker_charts();
                if(status){
                    this.on_over_out(this.Layer_wfs)
                }
                else{
                    this.off_over_out();
                }
            })
            this.$Bus.$on('change_propName', (propName) => {
                this.propName=propName
            })
            this.$Bus.$on('checkbox_Change', (checkbox_checked) => {
                this.checkbox_checked=checkbox_checked;
                if(checkbox_checked==true){
                    this.AddWfsNeighbor();
                }
                else{
                    this.removeWfsNeighbor();
                }
                
            })
            this.$Bus.$on('get_details', (active_result_details) => {
                this.active_result_details=active_result_details
            })
        },
        methods: {
            Wms_params_fun(){
                let CQL_FILTER=`code = ${this.regionid}`
                if(this.region_level<4){
                    CQL_FILTER=`precode = ${this.regionid}`;
                }
                return {
                    'FORMAT': 'image/png',
                    'VERSION': '1.1.0',
                    tiled: true,
                    STYLES: '',
                    LAYERS: this.$store.state.Geo_Layer_Name,
                    SRS: "EPSG:3857",
                    CQL_FILTER: CQL_FILTER,
                    WIDTH:2180,
                    HEIGHT:900
                }
            },
            Wfs_params_fun(){
                return {
                        service:'WFS',
                        version:'1.0.0',
                        request:'GetFeature',
                        TYPENAME:this.$store.state.Geo_Layer_Name,
                        outputFormat:'application/json',
                        SRSNAME:'EPSG:3857',
                        PROPERTYNAME:'name,code,precode,level',//geom
                    }

            },
            init_wrapper(){
                let that=this;
                let jq=this.$jq
                jq("#mapType-wrapper").off('hover').hover(function(){
                    jq(this).addClass("expand");
                },function(){
                    jq(this).removeClass("expand");
                }).find(".mapTypeCard").off('click').click(function(){
                    var typeNew=jq(this).attr("data-name");
                    var typeActive=jq("#mapType-wrapper").find(".mapTypeCard.active").attr("data-name")
                    jq("#mapType-wrapper").find(".mapTypeCard").removeClass("active")
                    if(typeNew==typeActive){
                        that.wrapper_change(typeNew,false);
                    }
                    else{
                        jq(this).addClass('active')
                        that.wrapper_change(typeNew,true);
                    }
                    return false;
                })
            },
            wrapper_change(type,show){
                this.Groupvec.setVisible(false);
                this.Groupimg.setVisible(false);
                if(type=="sl" && show){
                    this.Groupvec.setVisible(true);
                }
                else if(type=="yx" && show){
                    this.Groupimg.setVisible(true); 
                }
            },
            container_size_change(){
                this.olMap.updateSize();
            },
            regionidChange(){
                //1.更新wms地图范围
                if(this.Layer_wms){
                    this.Layer_wms.setSource(new ol.source.TileWMS({
                        url: this.$geoserver_wms,
                        params: this.Wms_params_fun(),
                        ratio:2,
                    }))
                    this.Layer_wms.getSource().refresh();
                }
                //2.更新要素地图范围
                if(this.Layer_wfs){
                    this.Layer_wfs.getSource().setLoader(this.setLoader)//自动更新范围
                    this.Layer_wfs.getSource().refresh();
                }
                //3.更新驻地图标
                if(this.Layer_station){
                    this.clear_station_Marker();
                    // this.Layer_station.getSource().refresh();
                    this.add_station_Marker(this.$store.state.Select_Xzqh_properties.stationx-0,this.$store.state.Select_Xzqh_properties.stationy-0);
                    //this.Layer_station.getSource().refresh();
                }
                //this.Layer_wms.getSource().updateParams(this.Wms_params());
                // this.Layer_wms.getSource().refresh();
                // this.Layer_wfs.getSource().refresh();
                // this.AddWfsNeighbor();


                //this.restExtent = this.olView.calculateExtent()
                //this.reset()
            },
            AddWms(){
                this.Layer_wms = new ol.layer.Tile({
                    visible: true,
                    
                });
                this.olMap.addLayer(this.Layer_wms)
                // source: 
            },
            AddWfs(){        
                this.vector_WFS_Source =new ol.source.Vector({
                    format: new ol.format.GeoJSON(),
                });
                this.Layer_wfs=new ol.layer.Vector( {
                    source: this.vector_WFS_Source,
                    style:new ol.style.Style({
                        fill:new ol.style.Fill({ 
                            color: [0, 0, 0, 0]
                        }),
                        stroke:  new ol.style.Stroke({ 
                            //color:[255, 0, 0, 0.9]
                            color:[55, 55, 251, 1]
                        })
                    })
                });
                this.olMap.addLayer(this.Layer_wfs)
                this.on_over_out(this.Layer_wfs)
                // this.Layer_wfs.on('postrender', (event)=>{
                //     // this.shwodetails(false)
                //     console.log('postrender')
                // });
            },
            setLoader(extent, resolution, projection){
                this.WFS_loading=true; 
                let PropertyIsEqualTo=`<PropertyIsEqualTo><PropertyName>${this.region_level==4?"code":"precode"}</PropertyName><Literal>${this.regionid}</Literal></PropertyIsEqualTo>`
                let pdata=this.Wfs_params_fun();
                pdata.PROPERTYNAME='geom,name,level,code'
                pdata.FILTER=`<Filter><And>${PropertyIsEqualTo}<PropertyIsNotEqualTo><PropertyName>level</PropertyName><Literal>1</Literal></PropertyIsNotEqualTo></And></Filter>`
                pdata.SORTBY='code'
                this.vector_WFS_Source.clear();
                this.axios_get(this.$geoserver_wfs,pdata).then((features)=>{
                    this.WFS_loading=false;
                    if(features && features.length>0){
                        let Features=this.vector_WFS_Source.getFormat().readFeatures({
                            "type": "FeatureCollection",
                            "features": features
                        });

                        this.setLoader_post_do(Features)
                    }
                })
            },
            async setLoader_post_do(Features){
                let that=this
                this.vector_WFS_Source.clear();
                let mw=[]
                if(that.$store.state.MengWen==true){
                    mw=await this.GetPropFunc(this.regionid,null,true)
                    console.log(mw)
                    // .then(databack=>{
                    //     if (databack && databack.length > 0) {
                    //         this.$store.state.Select_Xzqh_properties=databack[0]
                    //     }
                    //     this.$Bus.$emit('regionid_change',code,level,this.activeName,precode);
                    // });
                }
                Features.forEach(async (Feature,index)=>{
                    Feature.on("mousein",(EventsKey)=>{
                        that.Layer_wfs_over(EventsKey,Feature);
                    });
                    Feature.on("mouseout",(EventsKey)=>{
                        that.Layer_wfs_out(EventsKey,Feature);
                    });
                    let indexCorlor=index  % 27 ;
                    let fill_color=that.ColorRGB[indexCorlor]
                    let font='Microsoft YaHei'
                    let text=Feature.A.name
                    //Feature.values_
                    let rotation=0
                    if(that.$store.state.MengWen==true){
                        font='15px MenkQaganTig'
                        text=mw.find((_result)=>{
                            return _result.code==Feature.values_.code
                        }).ethnic_minorities_writing
                        rotation=-55
                        if(text){
                            let text_split=text.split(' ');
                            let styles = [];
                            for (let ii = 0; ii < text_split.length; ii++) {
                                let element = text_split[ii];
                                let  TextStyle = new ol.style.Style({
                                    fill:new ol.style.Fill({ color: fill_color}),
                                    stroke:  new ol.style.Stroke({ color:[55, 55, 251, 0]}),
                                    text:  new ol.style.Text({
                                        textAlign: "right",
                                        textBaseline: "middle",
                                        placement:'point',
                                        font:font,
                                        text: text_split[ii],
                                        offsetY: (text_split.length-ii-1)*10,
                                        rotation: rotation,
                                    })
                                }); 
                                styles.push(TextStyle)
                            }
                            Feature.setStyle(styles)
                            Feature.oldstyle=styles;
                            Feature.oldstyle_type='m'
                        }
                        else{
                            let _style=that.create_text_Style(fill_color,text,font,rotation)
                            Feature.setStyle(_style)
                            Feature.oldstyle=_style;
                            Feature.oldstyle_type='s'
                        }
                    }
                    else{
                        let _style=that.create_text_Style(fill_color,text,font,rotation)
                        Feature.setStyle(_style)
                        Feature.oldstyle=_style;
                        Feature.oldstyle_type='s'
                    }
                })
                this.vector_WFS_Source.addFeatures(Features);
                let vector_WFS_Source_Extent=this.vector_WFS_Source.getExtent()
                this.restExtent=ol.extent.buffer(vector_WFS_Source_Extent,9500)
                // console.log(this.restExtent)


                this.reset()
                //this.get_station_codes();//bug 修改 
            },
            add_station_Marker(x, y)
            {
                console.log(x, y)
                let feature=new ol.Feature({
                    geometry:new ol.geom.Point(ol.proj.transform([x, y],'EPSG:4326', 'EPSG:3857' ) )
                });
                feature.setStyle(this.station_Marker_style())
                feature.setProperties({
                    index:0
                },true)
                this.station_maker_source.addFeature(feature)
                // this.Layer_station.getSource()
            },
            clear_station_Marker(){
                this.Layer_station.getSource().clear()
            },
            station_Marker_style(){
                return new ol.style.Style({
                    image: new ol.style.Icon({
                        src: this.station_maker,
                        size:[36, 36],
                        // offset:[0,0],
                        // imgSize:[300,300],
                        scale:0.5
                    }),
                    zIndex:20
                })
            },
            //初始化地图
            initmap() {
                let layers=this.Get_TDTlayers();
                this.Groupvec=layers[0];
                this.Groupimg=layers[1];
                this.olView=new ol.View({
                    center: ol.proj.transform(this.orginViewPoint,'EPSG:4326', 'EPSG:3857' ) ,
                    zoom:5,
                })
                this.olMap=new ol.Map({
                    controls:[],
                    target: 'mapDiv',
                    maxTilesLoading:16,
                    layers: layers,
                    view: this.olView
                })
                //this.AddWms(); //WMS 模式渲染  速度快 但是没有鼠标交互 =.=
                this.AddmousePositionControl();//地图移动坐标显示控件
                this.AddWfs();//WFS 模式渲染 速度满 但是有鼠标交互 =.=
                this.AddstationLayer();//行政区划的驻地maker图层
                //this.Addstation_chartsLayer();//行政区划的驻地makercharts图层
                this.olMap.on('pointermove', (event)=>{ //鼠标的移入和移出要素
			        if(this.olMap.hasFeatureAtPixel(event.pixel)){
                        let Features=this.olMap.getFeaturesAtPixel(event.pixel,{
                            layerFilter:(layer)=>{
                                if(this.Filterlayer){
                                    return layer.ol_uid==this.Filterlayer.ol_uid;
                                }
                                else{
                                    return false;
                                }
                            }
                        })
                        if(Features.length>0){
                            let feature_over=Features[0];
                            if(this.OverFeature){
                                if(this.OverFeature.ol_uid!=feature_over.ol_uid){
                                    this.OverFeature.dispatchEvent({type: 'mouseout', event: event,this:this});
                                }
                            }
                            feature_over.dispatchEvent({type: 'mousein', event: event,this:this});
                            this.OverFeature=feature_over
                        }
                    }
                    else{
                        if(this.OverFeature){
                            this.OverFeature.dispatchEvent({type: 'mouseout', event: event,this:this});
                            this.OverFeature=null;
                        }
                    }
                });
                this.olMap.on('dblclick', (event)=>{
                    if(this.olMap.hasFeatureAtPixel(event.pixel)){
                        let Features=this.olMap.getFeaturesAtPixel(event.pixel,{
                            layerFilter:(layer)=>{
                                if(this.Filterlayer){
                                    return layer.ol_uid==this.Layer_wfs.ol_uid;
                                }
                                else{
                                    return false;
                                }
                            }
                        })
                        if(Features.length>0){
                            let feature_dblclick=Features[0];
                            this.$Bus.$emit('double_click', feature_dblclick.A.code,feature_dblclick.A.level)
                        }
                    }
                 });
                // let dblClickInteraction = ;
                this.olMap.removeInteraction(this.olMap.getInteractions().getArray().find(interaction => {
                    return interaction instanceof ol.interaction.DoubleClickZoom;
                }))
                this.olMap.on('movestart', (event)=>{
                    this.shwodetails(true)
                    //console.log('movestart')
                });
                // this.olMap.on('moveend', (event)=>{
                //     this.shwodetails(false)
                // });
            },
            AddmousePositionControl(){ //地图移动坐标显示控件
                var mousePositionControl=new ol.control.MousePosition({
                    coordinateFormat:ol.coordinate.createStringXY(3),
                    projection:"EPSG:4326",
                    className:"standard-map__mouse-position",
                    target:document.getElementById("mapDiv"),
                    undefinedHTML:"0,0"
                });
                this.olMap.addControl(mousePositionControl);
            },
            AddstationLayer(){
                this.station_maker_source= new ol.source.Vector({
                    features:[]
                });
                this.Layer_station = new ol.layer.Vector({
                    source: this.station_maker_source,
                    style: this.station_Marker_style(),
                });
                this.olMap.addLayer(this.Layer_station)
            },
            reset(){
                this.ViewFlyTo(this.restExtent)
            },
            ViewFlyTo(geometryOrExtent){
                // console.log(geometryOrExtent)
                this.olView.fit(geometryOrExtent,{
                    // duration:1000,
                    constrainResolution: false,
                    earest:true,
                    //maxZoom:11,

                    // callback:(value)=>{
                    //     console.log("ViewFlyTo",value)
                    // },
                })
                // console.log(this.ol)
            },
            on_over_out(layer){
                this.Filterlayer=layer;
            },
            off_over_out(){
                this.Filterlayer=null;
            },
            create_text_Style(fill_color,text,font,rotation=0,offsetY=0){
                let _style=new ol.style.Style({
                    fill:new ol.style.Fill({ color: fill_color}),
                    stroke:  new ol.style.Stroke({ color:[55, 55, 251, 0]}),
                    text:new ol.style.Text({
                        text:text,
                        offsetY:18,
                        scale:1.0,
                        font:font,
                        rotation:rotation,
                        placement:'LINE',
                        offsetY:offsetY
                    })
                })
                return _style;
            },
            AddWfsNeighbor(){    
                this.removeWfsNeighbor();
                if(this.checkbox_checked==false){
                   return ;
                }
                // if(this.region_level<2){
                //     return ;
                // }
                let vector_WFS_Source =new ol.source.Vector({
                    format: new ol.format.GeoJSON(),
                });
                this.Layer_wfs_Neighbor=new ol.layer.Vector( {
                    source: vector_WFS_Source,
                    style:new ol.style.Style({
                        fill:new ol.style.Fill({ 
                            color: [0, 0, 0, 0]
                        }),
                        stroke:  new ol.style.Stroke({ 
                            //color:[255, 0, 0, 0.9]
                            color:[55, 55, 251, 1]
                        })
                    })
                });
                this.olMap.addLayer(this.Layer_wfs_Neighbor)
                vector_WFS_Source.clear();
                let PropertyIsEqualToA=`<PropertyIsEqualTo><PropertyName>code</PropertyName><Literal>${this.regionid}</Literal></PropertyIsEqualTo>`
                //let PropertyIsNotEqualToA=`<PropertyIsNotEqualTo><PropertyName>level</PropertyName><Literal>1</Literal></PropertyIsNotEqualTo>`
                //let FILTER=`<Filter><And>${PropertyIsEqualToA}${PropertyIsNotEqualToA}</And></Filter>`;
                let FILTER=`<Filter>${PropertyIsEqualToA}</Filter>`;
                let pdata=this.GetNew_Wfs_params();
                pdata.PROPERTYNAME='geom,name'
                pdata.FILTER=FILTER
                pdata.SRSNAME='EPSG:4326'
                let ajaxSet={
                    type:"post",
                    async:true,
                    dataType:"json",
                    url: window.Glod.wfs,
                    data: pdata,
                }
                let that=this;
                this.$jq.ajax(ajaxSet).then((datas) => {
                    return Promise.resolve(datas)
                })
                .then(datas=>{
                    if(datas.features.length>0){
                        let Features=vector_WFS_Source.getFormat().readFeatures(datas);
                        let geom=Features[0].getGeometry();
                        let s_geoms=[];
                        for (let index = 0; index < geom.flatCoordinates.length; ) {
                            let element = geom.flatCoordinates[index];
                            let element1 = geom.flatCoordinates[index+1];
                            let elements=element+","+element1
                            let OnePoint=[];
                            OnePoint.push(element-0);
                            OnePoint.push(element1-0);
                            s_geoms.push(OnePoint);
                            index=index+2
                        }
                        let s_geom=s_geoms.join(' ')
                        return Promise.resolve(s_geom)
                    }
                    else{
                        return Promise.reject(false)
                    }
                })
                .then(s_geom=>{
                    let Property_code=``
                    if(that.region_level==4){
                        Property_code=`<PropertyIsNotEqualTo><PropertyName>code</PropertyName><Literal>${that.regionid}</Literal></PropertyIsNotEqualTo>`
                    }
                    else{
                        Property_code=`<PropertyIsNotEqualTo><PropertyName>precode</PropertyName><Literal>${that.regionid}</Literal></PropertyIsNotEqualTo>`
                    }
                    let Property_level=''
                    if(that.region_level==4){
                        Property_level=`<PropertyIsEqualTo><PropertyName>level</PropertyName><Literal>${that.region_level}</Literal></PropertyIsEqualTo>`
                    }
                    else{
                        Property_level=`<PropertyIsEqualTo><PropertyName>level</PropertyName><Literal>${that.region_level+1}</Literal></PropertyIsEqualTo>`
                    }
                    let PropertyIsNotEqualToB=`<PropertyIsNotEqualTo><PropertyName>level</PropertyName><Literal>1</Literal></PropertyIsNotEqualTo>`
                    let IntersectsB=`<Intersects><PropertyName>geom</PropertyName><gml:Polygon><gml:outerBoundaryIs><gml:LinearRing><gml:coordinates>${s_geom}</gml:coordinates></gml:LinearRing></gml:outerBoundaryIs></gml:Polygon></Intersects>`
                    FILTER=`<Filter xmlns="http://www.opengis.net/ogc" xmlns:gml="http://www.opengis.net/gml"><And>${Property_code}${Property_level}${IntersectsB}</And></Filter>`;
                    pdata=that.GetNew_Wfs_params();
                    pdata.PROPERTYNAME='geom,name'
                    pdata.FILTER=FILTER
                    ajaxSet={
                        type:"post",
                        async:true,
                        dataType:"json",
                        url: window.Glod.wfs,
                        data: pdata,
                    }
                    let p1=this.$jq.ajax(ajaxSet)

                    let pdata_other={
                        service:'WFS',
                        version:'1.0.0',
                        request:'GetFeature',
                        TYPENAME:'cite:xzqh_other',
                        outputFormat:'application/json',
                        SRSNAME:'EPSG:3857',
                        PROPERTYNAME:'geom,name',//geom
                        FILTER:`<Filter xmlns="http://www.opengis.net/ogc" xmlns:gml="http://www.opengis.net/gml">${IntersectsB}</Filter>`,
                    };
                    let ajaxSet_other={
                        type:"post",
                        async:true,
                        dataType:"json",
                        url: window.Glod.wfs,
                        data: pdata_other,
                    }
                    let p2=this.$jq.ajax(ajaxSet_other)
                    
                    
                   
                    return Promise.all([p1,p2]) .then((datas) => {
                        return Promise.resolve(datas)
                    });
                })
                .then(datas=>{
                    if(datas.length==2){
                        var features_new = datas[0].features.concat(datas[1].features);
                        datas[0].features=features_new
                        let result=datas[0]
                        if(result.features.length>0){
                            let Features222=vector_WFS_Source.getFormat().readFeatures(result);
                            Features222.forEach((Feature,index)=>{
                                let fill_color_style=new ol.style.Style({
                                    stroke:  new ol.style.Stroke({ 
                                        color:[255, 0, 0, 0.6]
                                    }),
                                    text:new ol.style.Text({
                                        text:Feature.values_.name,
                                        offsetY:18,
                                        scale:1.4,
                                        font:'Microsoft YaHei'
                                    })
                                })
                                Feature.oldstyle=fill_color_style;
                                Feature.setStyle(fill_color_style)
                            })
                            vector_WFS_Source.addFeatures(Features222);
                        }
                    }
                })
                return;
            },
            AddWfsNeighbor_Other(){

            },
            removeWfsNeighbor(){
                if(this.Layer_wfs_Neighbor){
                    this.olMap.removeLayer(this.Layer_wfs_Neighbor)
                    this.Layer_wfs_Neighbor=null
                }
                if(this.Layer_wfs_Neighbor){
                    this.olMap.removeLayer(this.Layer_wfs_Neighbor)
                    this.Layer_wfs_Neighbor=null
                }
            },
            
            Addstation_chartsLayer(){
                let station_chartsSource = new ol.source.Vector({
                    features:[]
                });
                this.Layer_station_charts = new ol.layer.Vector({
                    source: station_chartsSource,
                    style: this.Layer_station_makern_charts_style
                });
                this.olMap.addLayer(this.Layer_station_charts)
            },
            Layer_station_makern_charts_style(feature){
                return  new ol.style.Style({
                    image: new ol.style.Icon({
                        src: this.station_maker_charts,
                        size:[40, 42],
                        scale:0.5
                    }),
                });
            },
            add_station_Marker_charts(x, y)
            {
                let coordinate=ol.proj.transform([x, y],'EPSG:4326', 'EPSG:3857' ) 
                let feature=new ol.Feature({
                    geometry:new ol.geom.Point(coordinate)
                });
                this.Layer_station_charts.getSource().addFeature(feature)
            },
            clear_station_Marker_charts(){
                this.Layer_station_charts.getSource().clear()
            },
            Layer_wfs_over(EventsKey,Feature){
                this.FeatureOverStyle=Feature.getStyle();
                if(Array.isArray(this.FeatureOverStyle)){
                    let styles=[]
                    for (let index = 0; index < this.FeatureOverStyle.length; index++) {
                        let element = this.FeatureOverStyle[index];
                        let wfs_over_style=new ol.style.Style({
                            fill:new ol.style.Fill({ 
                                color:[155, 155, 208, 0.2]
                            }),
                            stroke:  new ol.style.Stroke({ 
                                color:[255, 0, 0, 0.9]
                            }),
                        })
                        let text=element.getText()
                        wfs_over_style.setText(text)
                        styles.push(wfs_over_style)
                    }
                    Feature.setStyle(styles)
                }
                else{
                    let wfs_over_style=new ol.style.Style({
                        fill:new ol.style.Fill({ 
                            color:[155, 155, 208, 0.2]
                        }),
                        stroke:  new ol.style.Stroke({ 
                            color:[255, 0, 0, 0.9]
                        }),
                    })
                    wfs_over_style.setText(Feature.oldstyle.getText())
                    Feature.setStyle(wfs_over_style)
                }
                return;
            },
            Layer_wfs_out(EventsKey,Feature){
                Feature.setStyle(Feature.oldstyle)
                return;
            },
            setColorRandom(index)
            {
                return this.ColorRGB[index]
            },
            
            
            
            
            
            GetMaxPersons(props){
                let max=0.0;
                let min=0.0;
                let persons=[]
                props.forEach((prop)=>{
                    if(prop ){
                        persons.push(prop.persons);
                    }
                });
                persons.sort((val1,val2)=>{
                    return val1-val2;
                })
                return [persons[0],persons[persons.length-1]]
            },
            clear_station_chart(){
                let Overlays=this.olMap.getOverlays().clear();
            },
            get_station_codes(){
                this.codes=[] 
                this.names=[]
                let Features=this.Layer_wfs.getSource().getFeatures()
                Features.forEach((Feature)=>{
                    this.codes.push(Feature.values_.code);
                    this.names.push(Feature.values_.name);
                });
                if(this.codes.length>0){
                    //Bus.$emit('get_station_codes_end',this.codes,this.names)
                }
                
            },
            add_station_chart(){
                this.clear_station_chart();
                this.clear_station_Marker_charts();
                let MaxPersons=this.GetMaxPersons(this.all_station_Persons);
                this.all_station_Persons.forEach((prop)=>{
                    if(prop){
                        let content = $(`<div class="mapChart" id="mapChart_${prop.code}" style="width:25px; max-width:30px;height:100px;max-height:200px;"></div>`)[0]
                        let nameIndex=this.codes.findIndex((elem)=>{
                            return elem==prop.code;
                        });
                        let name=this.names[nameIndex]
                        let myChart = this.$echarts.init(content);
                        let option={
                                tooltip: {
                                trigger: 'axis',
                                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                                }
                            },
                            xAxis: {
                                type: 'category',
                                data: [name],
                                show: false,
                            },
                            yAxis: {
                                type: 'value',
                                show: false,
                                min: 0,
                                max: MaxPersons[1],
                            },
                            series: [
                                {
                                    data: [prop[this.propName]],
                                    label: {
                                        position: 'insideTop',
                                        show: true,
                                    },
                                    type: 'bar',
                                    showBackground: true,
                                    backgroundStyle: {
                                        color: 'rgba(220, 220, 220, 0.8)'
                                    }
                                }
                            ],
                            grid: {
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 0
                            },
                        };
                        myChart.setOption(option);
                        let Chart = new ol.Overlay({
                            element:content,
                            className:"mapChart",
                            autoPan:true,
                        })
                        let position=ol.proj.transform([prop.stationx, prop.stationy],'EPSG:4326', 'EPSG:3857' ) 
                        Chart.setPosition(position);
                        this.add_station_Marker_charts(prop.stationx, prop.stationy)
                        Chart.setPositioning('bottom-center') //bottom-left  bottom-center
                        Chart.setOffset([0,-30]) //bottom-left  bottom-center
                        this.olMap.addOverlay(Chart);
                    }
                    
                });
            },
            prelevel(){
                this.$Bus.$emit('double_click', this.region_precode,this.region_level-1)
            },
            shwodetails(_hide){
                let ss=this.$jq("#cards-level2")
                let hided=(ss.css("display")=="none")
                if(_hide==true){
                    ss.hide("normal",()=>{
                        this.$Bus.$emit('container_size_change');
                    });
                }
                else if(_hide==false){
                    ss.show("normal",()=>{
                        this.$Bus.$emit('container_size_change');
                    });
                }
                else{
                    if(hided){
                        ss.show("normal",()=>{
                            this.$Bus.$emit('container_size_change');
                        });
                    }else{
                        ss.hide("normal",()=>{
                            this.$Bus.$emit('container_size_change');
                        });
                    }
                }
                
                
            },
        },
    }
</script>
<style>
.m-s-sideber__button_left{
    margin-top: 360px;
    /* position: absolute; */
    padding: 0 4px;
    right: -0px;
    top: 50%;
    width: 24px;
    height: 80px;
    background: url() no-repeat 0 0;
    transform: rotate(180deg);
    cursor: pointer;
}
.map-template-main #generalheader{
    background-color: #7b87a1;
}
.map-template-main #left-panel{
    left: 0px;
    top: 0px;
}
</style>